<template>
  <div class="content-container">
    
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		<el-button-group>
			      <el-button size="mini" type="primary" icon="el-icon-edit" @click="addTag">新增</el-button>
			    </el-button-group>
      	</div>

        <div class="tools-right f-r">
          <el-tooltip content="刷新" placement="top">
            <el-button size="mini" type="primary" icon="el-icon-refresh" circle @click="refresh"></el-button>
          </el-tooltip>
        </div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn" :style="{height:ResultHeight+'px'}">
    	 
      <el-table
        border
        v-if="data"
        size="mini"
        :data="data"
        :height.sync="tableHeight"
        default-expand-all
        :expand-row-keys="['id']"
        row-key="id"
        :tree-props="{children: 'children'}"
        style="width: 100%"
      >
        
        <el-table-column
          fixed
            type="index"
            :index="tableIndex">
        </el-table-column>

        <el-table-column
          fixed
          prop="name"
          label="分类名称"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
        </el-table-column>

        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="200">
        </el-table-column>

     
        <el-table-column
          fixed="right"
            label="操作"
            width="250"
        >

          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-button
              size="mini"
              type="primary"
              @click="handleDel(scope.$index, scope.row)"
            >删除</el-button>


          </template>

        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            class="pagination"
            small
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, prev, pager, next"
            :total="page.total">
        </el-pagination>
      </div>

    </div>


    <equip-type-dialog
      :title="dialogTitle"
      :type="dialogType"
      :form="editForm"
      :visible="dialogVisible"
      @btnCancel="DialogCancel"
      @btnConfirm="DialogConfirm"
    ></equip-type-dialog>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'

import { getList, update, del } from "@/api/admin/equipType"

import EquipTypeDialog from '@/components/Dialog/equipTypeDialog'
import adminMixins from "@/mixins/admin"
export default {
  name: 'gservice',
  mixins:[adminMixins],
  components:{
    EquipTypeDialog
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  data(){
  	return{
      dialogTitle:'新增分类',
      dialogType:1,
      dialogVisible:false,
      loading:true,
  		data:null,
  		page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      pageSizes:[10,20,30,40,50,100],
      editForm:null,

  	}
  },
  mounted(){
    //设置dom尺寸
    this.setSize();
  	this.loadData(this.page)
  },
  methods:{
  	//请求table数据
  	loadData(page, params = {}){
  		this.loading = true;
      getList(page.currentPage, page.pageSize).then(res => {
        console.log("--------获取文章标签----------")
        console.log(res)
        this.loading = false;
        var result = res.data.data;
        this.page.total = result.count;
        this.data = result.records;
      });		
  	},
  	//表格序号
  	tableIndex(index){
  		return index+1
  	},
    //新增标签
    addTag(){
      this.editForm = null;
      this.dialogType = 1;
      this.dialogTitle = "新增分类";
      this.dialogVisible = true;
    },
  	//更新分类
    handleEdit(index,row){

      this.editForm = row;
      this.dialogType = 2;
      this.dialogTitle = "修改分类";
      this.dialogVisible = true;
    },
    //删除分类
    handleDel(index,row){

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
          return del(row.id);
        }).then((res) => {

            this.loadData(this.page)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });

    },
    //刷新
    refresh(){
        this.loadData(this.page)
    },
    //模态框关闭事件触发
    DialogCancel(){
      this.dialogVisible = false;
      this.editForm = null;
    },
    //模态框确认事件触发
    DialogConfirm(type,data){
      
  
      update(data).then((res)=>{

        console.log("------修改新曾返回信息---------")
        console.log(res)

        this.dialogVisible = false;
        this.editForm = null;

        this.$message({
          type: 'success',
          message: type == 1 ? "新增成功" : "修改成功"
        });

        this.loadData(this.page)

      })

    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap{
  	padding-top: 15px;
    text-align: right;
  }
}
</style>
